<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>杨浩-前端开发工程师-两年</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--条件注释兼容IE-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>

    <![endif]-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<!-- 头部 begin -->
<header class="Zhu_header" id="Zhu_header">
    <nav class="zhu_header" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand">个人简介</h1>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#message">基本信息</a></li>
                    <li><a href="#message_2">学习爱好</a></li>
                    <li><a href="#Zhu_skill">技能作品</a></li>
                    <li class="hidden-lg hidden-md"><a href="#effects_m_img">特效展示</a></li>
                    <li class="hidden-xs hidden-sm"><a href="#effects_pc_img">特效展示</a></li>
                    <li><a href="#footer">联系我</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<!-- 头部 end -->

<!-- 固定栏 begin -->
<div class="fixed" id="fixed">
    <a href="#Zhu_header">
        <i>▲</i>
        <span>回到顶部</span>
    </a>
    <a href="#message">
        <i>1</i>
        <span>基本信息</span>
    </a>
    <a href="#message_2">
        <i>2</i>
        <span>学习爱好</span>
    </a>
    <a href="#Zhu_skill">
        <i>3</i>
        <span>技能作品</span>
    </a>
    <a class="hidden-lg hidden-md" href="#effects_m_img">
        <i>4</i>
        <span>特效展示</span>
    </a>
    <a class="hidden-xs hidden-sm" href="#effects_pc_img">
        <i>4</i>
        <span>特效展示</span>
    </a>
    <a href="#footer">
        <i>5</i>
        <span>联系我</span>
    </a>
</div>
<!-- 固定栏 end -->

<!-- 大图 begin -->
    <!--移动端-->
    <div class="m_img hidden-lg hidden-md">
        <img src="images/long.jpg">
        <div class="record_2">
            <img class="img_3" src="images/yinyue1.png" >
            <img class="img_4 zhuzhu" src="images/pic-01.jpg" >
        </div>
    </div>
    <!--pc端-->
    <div class="pc_img hidden-sm hidden-xs" >
        <div class="container">
            <div id="particles-js"></div>
        </div>
        <div class="sun">
            <div class="earth"></div>
            <div class="other"></div>
        </div>

        <div class="record">
            <img class="img_1" src="images/yinyue1.png" >
            <img class="img_2 zhuzhu" src="images/pic-01.jpg" >
            <audio autoplay="autoplay" loop="loop">
                <source src="music/华语群星%20-%20奔跑%20(Live).mp3">
                <source src="music/华语群星%20-%20奔跑%20(Live).ogg">
                <source src="music/华语群星%20-%20奔跑%20(Live).wav">
            </audio>
        </div>
    </div>
<!-- 大图 end -->

<!-- 基本信息 begin -->
<div class="Zhu_message" id="Zhu_message_2">
    <div class="message" id="message">
        <h3>基本信息</h3>
        <div class="message_c">
            <p><span>姓 名：</span> 杨浩 </p>
            <p><span>年 龄：</span> 26</p>
            <p><span>籍 贯：</span> 湖南</p>
            <p><span>个人简介：</span>上高中时,就喜欢玩电脑，就对计算机方面的比较感兴趣，刚开始只是对计算机语言感兴趣,渐渐地, 自己对于网页的前端开发更为感兴趣比如html、css、JavaScript、Ajax、H5和css3等等，毕业后在亲人介绍的公司中工作学习，慢慢的对前端的一些基本框架可以熟练使用，比如bootstrap.js、zepto.js、等有独立编写js代码以及使用jquery框架的能力。兴趣是最好的老师,我相信,以后我的能力一定能达到公司发展的要求。</p>
        </div>
    </div>
    <div class="line"></div>
    <div class="message" id="message_2">
        <h3>学习方面</h3>
        <div class="message_c">
            <p><span>毕业院校：</span> 湖南安全技术职业学院</p>
            <p><span>学 历：</span> 大专</p>
            <p><span>专 业：</span> 计算机与信息</p>
        </div>
    </div>
    <div class="line"></div>
    <div class="message">
        <h3>兴趣爱好</h3>
        <div class="message_c">
            <p><span>运 动：</span> 跑步、台球、羽毛球</p>
            <p><span>书 籍：</span> 烹饪杂志、新闻、军事节目</p>
            <p><span>音 乐：</span> 轻音乐、放松</p>
            <p><span>游 戏：</span> LOL、网页游戏</p>
        </div>
    </div>
    <div class="line"></div>
    <div class="message">
        <h3>工作经历</h3>
        <div class="message_c">
            <p><span>就职职位：</span> web前端开发</p>
            <p><span>工作时间：</span> 2014年2月 - 2016年8月</p>
            <p><span>公司名称：</span>   长沙唯民网络科技有限公司</p>
            <p><span>职位职责：</span> 了解客户需求，实现客户需要的各种功能和页面</p>
        </div>
    </div>
</div>
<!-- 基本信息 end -->

<!-- 技能作品 begin -->
<div class="Zhu_skill" id="Zhu_skill">
    <div class="container-fluid">
        <div class="row Zhu_skill_t">
            <h3>技&nbsp;&nbsp;&nbsp;能</h3>
            <ul>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>html/css<s></s></a></li>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>Javascript<s></s></a></li>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>Jquery<s></s></a></li>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>H5/C3<s></s></a></li>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>Photoshop<s></s></a></li>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>Bootstrap<s></s></a></li>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>ajax<s></s></a></li>
                <li class="col-xs-6 col-sm-4"><a href="javascript:;"><i></i>angular<s></s></a></li>
                <li class="hidden-xs col-sm-4"><a href="javascript:;"><i></i>node.js<s></s></a></li>
            </ul>
        </div>
</div>
</div>
<!--<div class="Zhu_skill_2">-->
    <!--<div class="container-fluid">-->
        <!--<div class="row Zhu_skill_b">-->
            <!--<h3>作 品 展 示</h3>-->
            <!--<ul>-->
                <!--<li class="col-xs-12 col-sm-6"><a href="javascript:;" class="a_1">哈哈</a></li>-->
                <!--<li class="col-xs-12 col-sm-6"><a href="javascript:;" class="a_2">哈哈</a></li>-->
                <!--<li class="col-xs-12 col-sm-6"><a href="javascript:;" class="a_3">哈哈</a></li>-->
                <!--<li class="col-xs-12 col-sm-6"><a href="javascript:;" class="a_4">哈哈</a></li>-->
            <!--</ul>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<!-- 技能作品 end -->

<!-- 特效展示 begin -->
<!--移动端-->
<!--<div id="effects_m_img" class="effects_m_img hidden-lg hidden-md">-->
    <!--<img src="images/texiao.jpg">-->
    <!--<div class="txtMarquee-top">-->
        <!--<div class="bd">-->
            <!--<ul class="infoList">-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">旋转木马3D文字效果</a>-->
                    <!--<a class="col-xs-12 col-sm-6" href="javascript:;">中国打破了世界软件巨头规则</a>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<!--pc端-->
<div id="effects_pc_img" class="effects_pc_img hidden-xs hidden-sm" >
    <ul>
        <li></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span><span></span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span><span></span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>
</div>
<!-- 特效展示 end -->

<!-- 尾部 begin -->
<div class="footer" id="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="relation col-xs-12 col-sm-6">
                <h3>请联系我</h3>
                <div class="email">
                    <p>Email：</p>
                    <p class="p_1">819900721@qq.com</p>
                </div>
                <div class="phone">
                    <p>Phone：</p>
                    <p class="p_1">181-6948-1520</p>
                </div>
            </div>
            <div class="code col-xs-12 col-sm-6">
                <h3>扫码有惊喜哦 ~~~</h3>
                <div class="weixin col-xs-12 col-sm-6">
                    <img src="images/weixin.jpg" title="微信">
                    <p>我的微信二维码</p>
                </div>
                <div class="QQ col-xs-12 col-sm-6">
                    <img src="images/QQ.jpg" title="QQ">
                    <p>我的QQ二维码</p>
                </div>
            </div>
        </div>
    </div>
    <div class="designed">
        Designed by： 杨浩
    </div>
</div>
<!-- 尾部 end -->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script src="js/index.js"></script>

</body>
</html>